iT邦幫忙

1

前端小試身手(8)--教你寫出「思想審查警衛」,過濾垃圾雜訊的利器!

  • 分享至 

  • xImage
  •  

目錄

前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~
前端小試身手(2)--it幫跳轉到最佳解答
前端小試身手(3)--增添系列文目錄
前端小試身手(4)--it幫發文「一眼全覽」
前端小試身手(5)-備份it幫的發問!
前端小試身手(6)--IMG複製大師,懶人專用小腳本
前端小試身手(7)--迷片靜音神隊友,讓你尷尬不再有!
前端小試身手(8)--教你寫出「思想審查警衛」,過濾垃圾雜訊的利器!
前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

前情提要

資訊大爆炸。

有時候我們瀏覽技術文章,不一定真的是想學深奧的高級技術。
然而劣質低端的文章充斥著,則會降低我們學習的效率、甚至變成噪音與雜訊,干擾我們的思緒。
因此針對某些洗文或是質量很低的作者,我們必須列為思想犯,
否則會降低閱讀質量,平白浪費自己的時間、平台的版面、上網的電力、看到垃圾資訊的副作用等等....

構思來源

如果有個思想審查警衛可以:去除那些垃圾低端,稱不上技術文章的雜訊。
以確保未來瀏覽文章的時候,不會再被洗文打擾,
也可以針對不喜歡的主題去封鎖,讓時間與精神更能專注於自己想要學的資訊。

阻止一些垃圾就是喜歡把自己尚未整理的白痴內容一直丟上來,
什麼都還不懂,把技術文章當成個人日記簿,寫一堆自我囈語、無病呻吟,
每天大量狂發文章,昭告天下以為這就是努力,欺騙自己也浪費別人的人生。

「思想審查警衛」出動!

功能

  1. 把頭像屏蔽
  2. 加上思想通緝犯、紅字與刪除線
  3. 新增封殺按鈕
  4. 版面通知封殺名單與文章數
  5. 透過ajax確認某id的最新ID

效果截圖


此截圖僅是腳本示範,跟其使用者無關,
本人沒有任何覺得此使用者發的文章是差勁的意味,我認為非常上進、值得學習。


此圖也只是隨機挑user使用,純粹作為範例用途,不代表我個人意見。

腳本下載

https://greasyfork.org/zh-TW/scripts/477283-%E6%80%9D%E6%83%B3%E7%8A%AF%E5%B0%81%E6%AE%BA

原理說明

鄭重聲明,這個示範真的毫無任何私人意味,此腳本也只是針對不同的主題去隱藏,
例如我想學python就不想看到JS的文章,因此使用此工具幫忙隱藏罷了。
取名做思想警察、比喻成清除垃圾等都只是文學上的趣味。
請勿當真Ꮚ・ꈊ・Ꮚ

這次的技術可說比較難,認真難很多!但是趣味性以及功能性是無比的超越!
可以說幾乎是我寫系列文以來,最頂、最派的一篇!
不過很多觀念已經出現過,在【前端小試身手】系列裡面,每次的腳本都是主打實用,
因此cookie或localstorage這種技術當然都會運用到。

JS原始碼

// ==UserScript==
// @license MIT
// @name         👮思想犯封殺
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  把廢文製造機轟出去
// @author       You
// @match       https://ithelp.ithome.com.tw/articles*
// @match        https://ithelp.ithome.com.tw/users/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ithome.com.tw
// @grant        none
// @run-at document-end
// ==/UserScript==
 
let URL = window.location.href;
let ArticleSite = "https://ithelp.ithome.com.tw/articles?tab=tech"
let UserSite = "https://ithelp.ithome.com.tw/users/"
 
// 判斷URL的開頭部分
if (URL.startsWith(ArticleSite)) {
    //文章頁執行清理垃圾程序
    CleanGarbage();
} else if (URL.startsWith(UserSite)) {
    UserCheck();
} else {
    console.log("這邊不執行腳本");
}
 
 
// 餅乾儲存的機制函數-------------------------------------------------
function setListInCookie(list) {
    document.cookie = 'myList=' + JSON.stringify(list) + '; expires=Wed, 31 Dec 2099 23:59:59 GMT;';
}
 
// 從 Cookie 中獲取 list
function getListFromCookie() {
    var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)myList\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    return JSON.parse(cookieValue) || [];
}
 
 
function CleanGarbage(){
 
// 從本地存儲中獲取數據
var myListData = localStorage.getItem("myList");
// 解析數據到變量 list
var list = myListData ? JSON.parse(myListData) : [];
 
 
//list = getListFromCookie()||[]; // 儲存要刪除的字符串名單
// 找到所有CLASS是"qa-list__info-link"的<a>元素
var linkElements = document.querySelectorAll('.qa-list__info-link');
var removedCount = 0; // 初始化已清除的垃圾數量
 
for (var j = 0; j < list.length; j++) {
 
// 遍歷這些<a>元素,確保文本內容包含"伍貳捌",然後刪除其父元素
for (var i = 0; i < linkElements.length; i++) {
    if (linkElements[i].textContent.includes(list[j])) {
        // 開始向上查找父元素
        var parentElement = linkElements[i].parentElement;
 
        while (parentElement) {
            // 如果找到具有"classname"為"qa-list"的<div>元素,則刪除它
            if (parentElement.classList.contains('qa-list')) {
                parentElement.remove();
                removedCount++; // 增加清除的數量
                console.warn('抓到"'+list[j]+'"這位思想犯');
                break; // 找到並刪除後,結束循環
            }
 
            parentElement = parentElement.parentElement;
        }
    }
}
 
    if (removedCount>0){
        // 顯示已清除的垃圾數量
        console.log('已清除他的 ' + removedCount + ' 篇垃圾');}
removedCount=0;
}
}
//-------------------------------------------------------
// 為了防止五百八改名,我們針對他的ID去ajax得到他最新的名稱
function FindBitch() {
  // 使用 Fetch API 獲取指定 URL 的內容
  return fetch("https://ithelp.ithome.com.tw/users/20163468")
    .then(response => response.text())
    .then(data => {
      // 創建一個臨時 div 元素以容納頁面內容
      var tempDiv = document.createElement("div");
      tempDiv.innerHTML = data;
 
      // 查找 class 為 "profile-header__name" 的元素
      var profileNameElement = tempDiv.querySelector(".profile-header__name");
 
      if (profileNameElement) {
        // 刪除元素內的所有 <span> 元素
        var spanElements = profileNameElement.querySelectorAll("span");
        spanElements.forEach(function(span) {
          span.remove();
        });
 
        // 讀取元素的文本內容,去掉前導和尾隨空格
        var text = profileNameElement.textContent.trim();
 
        // 返回處理後的文本內容
        return text;
      } else {
        return "未找到元素";
      }
    })
    .catch(error => {
      console.error("發生錯誤: " + error);
      return "發生錯誤";
    });
}
 
 
//-------------------------------------------------------
 
 
 
function UserCheck(){
  //轉換資料從餅乾到localstorage
                        var currentCookieValue = getCookie("myList");
 
                        // 2. 存儲數據到本地存儲
                        if (currentCookieValue) {
                            var list = JSON.parse(currentCookieValue);
                            // 存儲到本地存儲
                            localStorage.setItem("myList", JSON.stringify(list));
                        }else{
 
                            FindBitch()
                                .then(text => {
                                let FirstKill = [text];
                                setListInCookie(FirstKill);
                            })
                                .catch(error => {
                                console.error("找不到五百八:", error);
                            });
 
 
                        }
 
 
 
// 刪除不需要的ID
document.querySelector('.profile-header__account').remove();
//封殺按鈕-------------------------------------------------
// 找到具有class為"profile-header__right"的元素
var profileRightElement = document.querySelector('.profile-header__right');
var pullRightElement = profileRightElement.querySelector('.pull-right');
 
        // 創建一個新按鈕元素
        var BlockBtn = document.createElement('button');
        BlockBtn.textContent = '封殺';
        // 添加樣式和類名到按鈕
        BlockBtn.style.marginTop = '10px';
        BlockBtn.style.width = '100%';
        BlockBtn.className = 'btn btn-trace trace_btn_border BlockBtn';
 
        // 將按鈕元素添加到"pull-right"元素內部
        pullRightElement.appendChild(BlockBtn);
 
// 通緝犯名單的cookie------------------------------------------------
 
// 從 Cookie 中加載 list(例如,頁面加載時)
list = getListFromCookie()||[];
let UserBlock = document.querySelector('.profile-header__name');
let text = UserBlock.textContent.trim();
 
 
 // 如果使用者已經在封殺名單內的判斷,已存在或不存在
                if (list.includes(text)) {
                        BlockStart(BlockBtn);
                    }
                    else
                    {
                    // 針對封殺按鈕進行監聽事件
                    BlockBtn.addEventListener('click', function() {
                    list.push(text);
                    setListInCookie(list);
 
                    //先加入到名單內,然後再執行封殺事件
                    BlockStart();
                    // 輸出到控制台
                    console.log('黑名單新增:' + text);
 
                        //本地儲存機制-----------------------------
                        let currentCookieValue = getCookie("myList");
                        let list2 = JSON.parse(currentCookieValue);
                        // 存儲到本地存儲
                        localStorage.setItem("myList", JSON.stringify(list2));
 
        });
                    }
}
 
// ------------------------------------------------
 
//封殺事件的函數
function BlockStart(){
    let BlockBtn = document.querySelector('.BlockBtn');
                   BlockBtn.textContent = '已封殺';
                    BlockBtn.disabled = true;
                    BadText();
                    BadImg();
}
 
//封殺事件函數裡面的細項函數
 
 
function BadText(){
// 標記這傢夥是垃圾-------------------------------------------------
    let UserBlock = document.querySelector('.profile-header__name');
    let newHeading = document.createElement('h1');
    newHeading.textContent = '思想通緝犯';
 
    // 把思想通緝犯這幾個大字加上去
    UserBlock.parentElement.insertBefore(newHeading, UserBlock);
    UserBlock.style.textDecoration = "line-through";
    UserBlock.style.color = "red";
 
}
 
 
function BadImg(){
//圖片進行網點作業XD-------------------------------------------------
var originalImage = document.querySelector('.profile-header__avatar');
 
// 創建一個包含交叉紅線的覆蓋層 <div> 元素
var overlayDiv = document.createElement('div');
overlayDiv.style.position = 'absolute';
overlayDiv.style.width = '150px';
overlayDiv.style.height = '150px';
overlayDiv.style.background = 'linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(-45deg, black 50%, transparent 50%)';
overlayDiv.style.backgroundSize = '5px 5px, 5px 5px';
 
 
overlayDiv.style.backgroundPosition = '0 0, 0 2px';
 
// 將覆蓋層疊加到圖片上
originalImage.parentNode.appendChild(overlayDiv);
 
// 設置覆蓋層的位置,以與原始圖像對齊
overlayDiv.style.top = originalImage.offsetTop + 'px';
overlayDiv.style.left = originalImage.offsetLeft + 'px';
 
// 設置覆蓋層的z-index,以確保它在圖片上方
overlayDiv.style.zIndex = '2';
}

觀念筆記

這個腳本開發足足花了我一整個晚上,將近八小時之久。
有趣的是,其中為了進行測試才選某些user當作隱藏對象,否則腳本執行上會出錯。
細心的人若觀察原始碼,也會發現裡面有個firstKill,
那是必須要的段落,先設置好cookie的首要內容物,才有辦法繼續操作下去( ิ◕㉨◕ ิ)

也就是初始化的概念XD

另一個有趣的點是,為了防止使用者改名導致腳本出錯,我甚至不惜再寫一段ajax,
去更新一下ID,這樣不管人家怎麼改,都逃不了,
要改成「別抓我」也沒用,這個腳本都還是可以run。

心得後記

我只能說這篇是自從「備份IT幫發文、一眼全覽」最強的JS教學文章!
超派,真的不騙( メ∀・)
有些人喜歡看前端小試身手,有些人喜歡前端動手玩創意;
其實這兩個系列的本質都是JS的教學,是可以互相連接的,但也有很多不同的重心。

這個系列就是以腳本為主,重點在於創意與發想,打到使用者痛點。
【前端動手玩創意】則是以建構網站為起點,
任何元素與概念都會變成網頁上的一部分,算是比較基礎工的建立。

如果對JS的強大感興趣,那麼可以把這兩個系列交互看,反覆的閱讀、實際動手操作,
這樣一來的學習非常踏實,甚至比YT學習都來的高效率、實際。
尤其此系列都是原創發想的腳本,當然超強!
喜歡記得關注,未來還有更多超酷的前端內容可以玩,下課⧸⎩⎠⎞͏(・∀・)⎛͏⎝⎭⧹


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言